//获取屏幕宽度
var htmlwidth = document.documentElement.clientWidth || document.body.clientWidth;

//获取html的dom
var htmlDom = document.getElementsByTagName('html')[0];

//设置html的fontsize
htmlDom.style.fontSize = htmlwidth / 10 + 'px'

window.onload = function() {

	//导航栏
	var navitem = document.querySelector('.nav');
	var navnum = navitem.querySelectorAll('li');
	var navcontent = document.querySelector('.nav-content');
	var yichu = 0;
	var zongjuli=0

	navitem.onscroll = function() { //获取滚动条滚动距离
		yichu = navitem.scrollLeft;
	}

	for(var i = 0; i < navnum.length; i++) {
		navnum[i].index = i; //给每个li赋值下标

	navnum[i].addEventListener('click', function() { //给每个Li绑定单击事件
	
			mainIndex = this.index; //获取当前单击li的下标
			daohangyanse();

			addTransitionb(); //单击li让内容区域滚动到指定内容
			setTranslateXb(-mainIndex * mainwidth);

			var dian = this.offsetLeft + this.offsetWidth / 2; //让Li居中显示
			var zongchang = navcontent.offsetWidth;
			var pinkuan = navitem.offsetWidth;
			var youbian = zongchang - yichu - pinkuan;
			var yidongjuli = dian - pinkuan / 2 - yichu;

			if(Math.abs(yidongjuli) > yichu && yidongjuli < 0) //点击最左边，控制移动距离
			{
				yidongjuli = -yichu;
			} else if(yidongjuli > youbian) {
				yidongjuli = youbian;
			}
			//alert("Li下标："+mainIndex+"移动距离："+yidongjuli+"溢出"+yichu);
//			navitem.scrollBy(yidongjuli, 0);
//zongjuli+=yidongjuli;
//			navitem.scrollLeft=zongjuli;
			yichu += yidongjuli;
			navitem.scrollLeft=yichu;

		})

	}
	var daohangyanse = function() {
		for(var i = 0; i < navnum.length; i++) { //清空颜色类名
			navnum[i].children[0].className = " ";
		}
		navnum[mainIndex].children[0].className = "nav-color"; //增加颜色类名
	}

	//轮播图

	//轮播图大盒子
	var banner = document.querySelector('.banner');
	//图片的通用宽度（屏宽）
	var imgwidth = banner.offsetWidth;
	
//推荐页面轮播图	
var imgCount = 5; //页面中用来轮播的图片有5张不同的
	//图片盒子	
	var imgBox = banner.querySelector('.imgbox');	
	//点盒子	
	var pointBox = banner.querySelector('.imgdot');
	//所有的点
	var points = pointBox.querySelectorAll('li');
	
LunBoTu(imgBox,imgCount,imgwidth,points);

//手机页面轮播图
	var imgCountsj = 2; 
	var imgboxsj = document.getElementById('imgbox_sj');	
	var imgdotsj = document.getElementById('imgdot_sj');
	var pointssj = imgdotsj.getElementsByTagName('li');
	
   LunBoTu(imgboxsj,imgCountsj,imgwidth,pointssj);
   
 //智能页面轮播图
	var imgCountzn = 3; 
	var imgboxzn = document.getElementById('imgbox_zn');	
	var imgdotzn = document.getElementById('imgdot_zn');
	var pointszn = imgdotzn.getElementsByTagName('li');
	
   LunBoTu(imgboxzn,imgCountzn,imgwidth,pointszn);
    
   //电视页面轮播图
	var imgCountds = 2; 
	var imgboxds = document.getElementById('imgbox_ds');	
	var imgdotds = document.getElementById('imgdot_ds');
	var pointsds = imgdotds.getElementsByTagName('li');
	
   LunBoTu(imgboxds,imgCountds,imgwidth,pointsds);
   
    //笔记本页面轮播图
	var imgCountbjb = 4; 
	var imgboxbjb = document.getElementById('imgbox_bjb');	
	var imgdotbjb = document.getElementById('imgdot_bjb');
	var pointsbjb = imgdotbjb.getElementsByTagName('li');
	LunBoTu(imgboxbjb,imgCountbjb,imgwidth,pointsbjb);
	
	 //家电页面轮播图
	var imgCountjd = 2; 
	var imgboxjd = document.getElementById('imgbox_jd');	
	var imgdotjd = document.getElementById('imgdot_jd');
	var pointsjd = imgdotjd.getElementsByTagName('li');
   LunBoTu(imgboxjd,imgCountjd,imgwidth,pointsjd);
   
   //生活周边页面轮播图
	var imgCountshzb = 3; 
	var imgboxshzb = document.getElementById('imgbox_shzb');	
	var imgdotshzb= document.getElementById('imgdot_shzb');
	var pointsshzb = imgdotshzb.getElementsByTagName('li');
   LunBoTu(imgboxshzb,imgCountshzb,imgwidth,pointsshzb);
   
   //盒子页面轮播图
/*	var imgCounthz = 2; 
	var imgboxhz = document.getElementById('imgbox_hz');	
	var imgdothz= document.getElementById('imgdot_hz');
	var pointshz = imgdothz.getElementsByTagName('li');
   LunBoTu(imgboxhz,imgCounthz,imgwidth,pointshz);*/
   
  
//公用方法
	//加过渡
	function LunBoTu(imageBox,imageCount,width,points){
	var addTransition = function() {
		imageBox.style.transition = "all 0.3s";
		imageBox.style.webkitTransition = "all 0.3s"; /*做兼容*/
	};
	//清除过渡
	var removeTransition = function(id) {
		imageBox.style.transition = "none";
		imageBox.style.webkitTransition = "none";
	}
	//定位
	var setTranslateX = function(translateX) {
		imageBox.style.transform = "translateX(" + translateX + "px)";
		imageBox.style.webkitTransform = "translateX(" + translateX + "px)";
	}

	//功能实现
	//自动轮播  定时器  无缝衔接  动画结束瞬间定位
	var index = 1;
	var timer = setInterval(function() {
		index++; //自动轮播到下一张
		//改变定位  动画的形式去改变  transition transform translate
		addTransition(); //加过渡动画
		setTranslateX(-index * width); //定位
	}, 3000);

	//等过渡结束之后来做无缝衔接,transitionend 事件在 CSS 完成过渡后触发。
	imageBox.addEventListener("transitionend", function(e) {
		//处理事件结束后的业务逻辑
		if(index > imageCount) {
			index = 1;
		} else if(index <= 0) {
			index = imageCount;
		}
		removeTransition(); //清除过渡
		setTranslateX(-index * width); //定位
		setPoint(); //设置底部显示当前图片对应的圆角
		e.stopPropagation();
		//	console.log("清楚过度")
	});

	//改变当前样式  当前图片的索引
	var setPoint = function() {
		//清除上一次的now
		for(var i = 0; i < points.length; i++) {
			points[i].className = " ";
		}
		//给图片对应的点加上样式
		points[index - 1].className = "now";
	}

	//touch事件
	var startX = 0; //记录起始  刚刚触摸的点的位置 x的坐标
	var moveX = 0; //滑动的时候x的位置
	var distanceX = 0; //滑动的距离
	var isMove = false; //是否滑动过

	imageBox.addEventListener('touchstart', function(e) {
		clearInterval(timer); //清除定时器
		startX = e.touches[0].clientX; //记录起始X
		time = Date.now(); //记录起始时间
		e.stopPropagation();
	});

	imageBox.addEventListener('touchmove', function(e) {
		moveX = e.touches[0].clientX; //滑动时候的X
		distanceX = moveX - startX; //计算移动的距离
		//计算当前定位  -index*width+distanceX
		removeTransition(); //清除过渡
		setTranslateX(-index * width + distanceX); //实时的定位
		isMove = true; //证明滑动过
		e.stopPropagation();
	});

	//在模拟器上模拟的滑动会有问题 丢失的情况  最后在模拟器的时候用window
	imageBox.addEventListener('touchend', function(e) {
		// 滑动超过 1/3 即为滑动有效，否则即为无效，则吸附回去

		if(isMove && Math.abs(distanceX) > width / 2) {
			//5.当滑动超过了一定的距离  需要 跳到 下一张或者上一张  （滑动的方向）*/
			if(distanceX > 0) { //上一张
				index--;
			} else { //下一张
				index++;
			}
		}
		if(isMove && (Date.now() - time) < 800) {
			if(distanceX > 0) { //上一张
				index--;
			} else { //下一张
				index++;
			}
		}
		addTransition(); //加过渡动画
		setTranslateX(-index * width); //定位

		if(index > imageCount) {
			index = 1;
		} else if(index <= 0) {
			index = imageCount;
		}
		setPoint();
		//重置参数
		startX = 0;
		moveX = 0;
		distanceX = 0;
		isMove = false;
		//加定时器
		clearInterval(timer); //严谨 再清除一次定时器
		e.stopPropagation();
		timer = setInterval(function() {
			index++; //自动轮播到下一张
			addTransition(); //加过渡动画
			setTranslateX(-index * width); //定位
		}, 3000);
	});
}
	//mains内容页面滑动

	var main = document.querySelector('.main');
	var mainul = document.querySelector('.main-ul');
	var mainwidth = main.offsetWidth;
	//过度动画

	var addTransitionb = function() {
		mainul.style.transition = "all 0.3s";
		mainul.style.webkitTransition = "all 0.3s"; /*兼容*/
	}
	//清楚过度动画
	var removeTransitionb = function() {
		mainul.style.transition = "none";
		mainul.style.webkitTransition = "none";
	}
	//位移
	var setTranslateXb = function(translateXb) {

		mainul.style.transform = "translateX(" + translateXb + "px)";
		mainul.style.webKitTransform = "translateX(" + translateXb + "px)";
	}

	//触摸事件
	var mainIndex = 0;	
	var distanceXb = 0;
	var isMoveb = false;
	var xhuadong;
	var X=0;
	var Y=0;
	var x1=0;
	var y1=0;
	var x2=0;
	var y2=0
	
	mainul.addEventListener('touchstart', function(e) {
		time = Date.now();	 
		 x1=e.touches[0].clientX;
		 y1=e.touches[0].clientY;
		 xhuadong=true;
	})

	mainul.addEventListener('touchmove', function(e) {		
		 x2=e.touches[0].clientX;
		 y2=e.touches[0].clientY;		
		 distanceXb=x2-x1;
      
		/*控制首页和末页滑动*/
		if(distanceXb < 0 && mainIndex >= 9 || distanceXb > 0 && mainIndex <= 0 ) {
			isMoveb = false;
			return;
		}
		
         /*以触屏屏幕的点为坐标原点a(0,0),滑动点为坐标终点b(+X,+Y)	*/ 
		 if(x2>x1){
		 	X=x2-x1;
		 }
		 else{
		 	X=x1-x2;
		 }
		 
		 if(y2>y1){
		 	Y=y2-y1;
		 }
		 else{
		 	Y=y1-y2;
		 }
		 
		 /*横向滑动（X距离大于Y距离，滑动角度小于45度，则定为横向滑动）*/ 
		 if(X>Y&&xhuadong==true){ 
		 	isMoveb=true;
		 removeTransitionb();
		setTranslateXb(-mainIndex * mainwidth + distanceXb);
		 }
		
		/*纵向滑动（Y距离>=X距离,滑动角度大于等于45度小于90度,定为纵向滑动）*/
	    else {
	    	isMoveb=false;
	    	xhuadong=false;
	    }
	    
	})
	
	mainul.addEventListener('touchend', function(e) {
	 //	mainul.off('touchmove'); //解除touchmove和touchend事件
		if(isMoveb && (Date.now() - time) <500) {
			if(distanceXb > 0) {
				mainIndex--
			} else {
				mainIndex++
			}
		} else if(isMoveb && Math.abs(distanceXb) > mainwidth / 2) {
                    
			if(distanceXb > 0) {
				mainIndex--
			} else {
				mainIndex++
			}

		}

		addTransitionb();
		setTranslateXb(-mainIndex * mainwidth);
distanceXb=0;
isMoveb=false;
		//滚动内容区域时，指向对应导航
		navnum[mainIndex].click(); //居中
		daohangyanse();
		
		

	})

}